---
# title: "Font Style"
title: "字体样式"
# description: "Utilities for controlling the style of text."
description: "用来控制字体样式的功能类。"
features:
  responsive: true
  customizable: false
  hover: false
  focus: false
---

import plugin from 'tailwindcss/lib/plugins/fontStyle'
import { Variants } from '@/components/Variants'
import { Disabling } from '@/components/Disabling'

export const classes = { plugin }

## Italics

<!-- Use the `italic` utility to make text italic. -->
使用 `italic` 功能类使文字变成斜体。

```html emerald
<template preview>
  <p class="italic text-xl text-emerald-800">The quick brown fox jumped over the lazy dog.</p>
</template>

<p class="**italic** ...">The quick brown fox ...</p>
```

## Undo Italics

<!-- Use the `not-italic` utility to display text normally. This is typically used to reset italic text at different breakpoints. -->
使用 `not-italic` 功能类正常显示文本。这通常用于在不同的断点处重置斜体文字。

```html amber
<template preview>
  <p class="not-italic text-xl text-amber-800">The quick brown fox jumped over the lazy dog.</p>
</template>

<p class="**not-italic** ...">The quick brown fox ...</p>
```

## 响应式

<!-- To control the font style of an element at a specific breakpoint, add a `{screen}:` prefix to any existing font style utility. For example, use `md:not-italic` to apply the `not-italic` utility at only medium screen sizes and above. -->
要在特定的断点处控制元素的字体样式，请在任何现有的字体样式功能类前添加 `{screen}:` 前缀。例如，使用 `md:not-italic` 来仅在中等大小及以上的屏幕应用 `not-italic` 功能类。

```html
<p class="italic **md:not-italic** ...">
  The quick brown fox jumped over the lazy dog.
</p>
```

<!-- For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation. -->
关于 Tailwind 的响应式设计功能的更多信息，请查看 [响应式设计](/docs/responsive-design) 文档。

## 定制

### 变体

<Variants plugin="fontStyle" />

### 禁用

<Disabling plugin="fontStyle" />
